<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>图片居中显示</title>
	<style type="text/css">
	html, body {
		height: 100%;
	}
	body {
		margin: 0;
		background: -webkit-radial-gradient(#222, #000);
		background: radial-gradient(#222, #000);
	}
	section	{
		width: 320px;
		margin: 300px auto;
	}
	div	{
		float: left;
		width: 100px;
		height: 100px;
		margin: 2px;
		overflow: hidden;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		background-color: #fff;
	}
	img {
		max-width: 100%;
		max-height: 100%;
		margin: 0 auto;
		display: block;
	}
	</style>
</head>
<body>
	<section>
		<div>
			<img src="img/1.jpg">
		</div>
		<div>
			<img src="img/2.jpg">
			
		</div>
		<div>
			<img src="img/3.jpg">
		</div>

		<div>
			<img src="img/4.jpg">
		</div>
		<div>
			<img src="img/5.png">
			
		</div>
		<div>
			<img src="img/6.gif">
		</div>

		<div>
			<img src="img/7.gif">
		</div>
		<div>
			<img src="img/8.gif">
			
		</div>
		<div>
			<img src="img/9.gif">
		</div>
	</section>

</html>